<template>
  <el-dialog :title="title" :visible="dialogVisible" width="40%" @close="handleClose">
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="文章标题:" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="文章内容:" prop="articleBody">
        <!--
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
          @ready="onEditorReady($event)"
           -->
        <quillEditor v-model="form.articleBody" ref="myQuillEditor"></quillEditor>
      </el-form-item>
      <el-form-item label="视频地址:">
        <el-input v-model="form.videoURL" placeholder="请输入视频地址"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleClose(1)">确 定</el-button>
      </el-form-item>
    </el-form>

    <!-- <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="handleClose">取 消</el-button>
      <el-button
        type="primary"
        @click="handleClose(1)"
      >确 定</el-button>
    </span> -->
  </el-dialog>
</template>

<script>
// 引入富文本编辑器
import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { add, update } from '@/api/hmmm/articles.js'
// const editorOption = {
//   modules: {
//     toolbar: [
//       ['bold', 'italic', 'underline', 'strike'], // toggled buttons
//       ['blockquote', 'code-block'],
//       // [{ header: 1 }, { header: 2 }], // custom button values
//       [{ list: 'ordered' }, { list: 'bullet' }],
//       [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
//       [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
//       [{ direction: 'rtl' }], // text direction
//       [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
//       // [{ header: [1, 2, 3, 4, 5, 6, false] }],
//       ['link', 'image', 'video'],
//       ['clean'] // remove formatting button
//     ]
//   },
//   placeholder: '请输入文章内容',
//   theme: 'snow'
// }
export default {
  name: 'ArticlesAdd',
  components: { quillEditor },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // editorOption: editorOption,
      form: {
        title: '',
        articleBody: '',
        videoURL: null,
        id: null
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: ['change', 'blur'] },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: ['change', 'blur'] }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: ['change', 'blur'] }
        ]
      }
    }
  },
  methods: {
    handleClose(val) {
      if (val === 1) {
        // 校验
        this.$refs.ruleForm.validate(async valid => {
          if (!valid) return this.$message.error('请填写完整信息')
          // console.log('确定')
          if (this.form.id) {
            await update(this.form)
            this.$message.success('修改成功')
          } else {
            // console.log(this.form)
            await add(this.form)
            this.$message.success('添加成功')

            // 刷新列表
          }
          this.$emit('update:dialogVisible', false)
          this.$emit('update')
        })
        // this.$emit('update:dialogVisible', false)
      } else {
        this.$refs.ruleForm.resetFields()
        this.form = { title: null, articleBody: null, videoURL: null, id: null }
        this.$emit('update:dialogVisible', false)
      }
    }
  },
  computed: {
    title() {
      return this.form.id ? '修改文章' : '添加文章'
    }
  }
}

</script>

<style scoped lang='scss'>
::v-deep .quill-editor {
  .ql-formats {
    display: none;
    &:nth-child(1) {
      display: inline-block;
    }
    &:nth-child(4) {
      display: inline-block;
    }
    &:nth-child(2) {
      display: inline-block;
    }

    &:last-child {
      display: inline-block;
    }
  }
  .ql-editor {
    height: 200px;
  }
}
</style>
